<template>
  <div class="qingwu">
    <div class="admin_main_block">
      <div class="admin_main_block_top">
        <div class="admin_main_block_left">
          <div v-if="edit_id">商品品牌编辑</div>
          <div v-else>商品品牌添加</div>
        </div>

        <div class="admin_main_block_right">
          <div>
            <el-button icon="el-icon-back" @click="$router.go(-1)">返回</el-button>
          </div>
        </div>
      </div>

      <div class="admin_form_main">
        <el-form label-width="100px" ref="info" :model="info">
          <el-form-item
            label="品牌名称"
            prop="name"
            :rules="[{required:true,message:'分类名不能为空',trigger: 'blur' }]"
          >
            <el-input placeholder="请输入内容" v-model="info.name"></el-input>
          </el-form-item>
          <el-form-item
            label="品牌简介"
            prop="brief"
            :rules="[{required:true,message:'品牌简介不能为空',trigger: 'blur' }]"
          >
            <el-input
              v-model="info.brief"
              placeholder="最多100个字符，超过字数限制不继续可输入"
              maxlength="100"
              clearable
              type="textarea"
              rows="4"
            />
          </el-form-item>
          <el-form-item label="品牌logo" prop="thumb" :rules="[{required:true,message:'请上传品牌logo' }]">
            <el-upload
              class="avatar-uploader"
              :action="$api.goodsBrandUpload"
              :headers="upload_headers"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
            >
              <img v-if="info.thumb" :src="info.thumb" class="avatar-upload" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item
            label="国家"
            prop="country"
            :rules="[{required:true,message:'请输入国家名称',trigger: 'blur' }]"
          >
            <el-input v-model="info.country"></el-input>
          </el-form-item>
          <!-- <el-form-item label="排序" prop="is_sort">
            <el-input placeholder="请输入内容" type="number" v-model="info.is_sort"></el-input>
          </el-form-item>-->
          <el-form-item>
            <el-button type="primary" @click="submitForm('info')">提交</el-button>
            <!-- <el-button @click="resetForm('info')">重置</el-button> -->
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      edit_id: 0,
      info: {
        name: "",
        brief: "",
        country: "",
        thumb: "",
      },
      list: [],
      upload_headers: {},
    };
  },
  watch: {},
  computed: {},
  methods: {
    resetForm: function (e) {
      this.$refs[e].resetFields();
    },
    submitForm: function (e) {
      let _this = this;

      // 验证表单
      this.$refs[e].validate(function (res) {
        if (res) {
          //  判断是Add 或者 Edit
          let url = _this.$api.addGoodsBrand;
          if (_this.edit_id > 0) {
            url = _this.$api.editGoodsBrand + _this.edit_id;
          }
          // Http 请求
          _this.$post(url, _this.info).then(function (res) {
            if (res.code == 200) {
              _this.$message.success("编辑成功");
              _this.$router.go(-1);
            } else {
              _this.$message.error("编辑失败");
            }
          });
        }
      });
    },
    get_goods_class_info: function () {
      let _this = this;
      this.$get(this.$api.editGoodsBrand + this.edit_id).then(function (res) {
        _this.info = res.data;
      });
    },
    selectChange: function () {
      this.$forceUpdate();
    },
    handleAvatarSuccess(res) {
      this.info.thumb = res.data;
      this.$forceUpdate();
    },
  },
  created() {
    this.upload_headers.Authorization =
      "Bearer " + localStorage.getItem("token"); // 要保证取到

    // 判断是否是编辑
    this.info.pid = 0;
    if (!this.$isEmpty(this.$route.params.id)) {
      this.edit_id = this.$route.params.id;
    }

    if (this.edit_id > 0) {
      this.get_goods_class_info();
    }
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
// .admin_main_block_top {
//   margin: 0;
//   padding: 0;
//   border: none;
// }
</style>